<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>超市订单管理系统</title>
        <link type="text/css" rel="stylesheet" href="../css/style.css"/>
        <link type="text/css" rel="stylesheet" href="../css/public.css"/>
        <link rel="stylesheet" href="../element-ui/index.css">
        <style>
            body {
                background-color: white;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div class="location">
                <strong>你现在所在的位置是:</strong> <span>订单管理页面</span>
            </div>
            <div style="margin: 10px 0 10px 0">
                <el-row>
                    <el-col :span="4">
                        <el-input v-model="productName" placeholder="请输入商品名" clearable></el-input>
                    </el-col>
                    <el-col :span="4">
                        <el-select v-model="providerId" placeholder="请选择供应商" clearable>
                            <el-option v-for="provider in proList" :label="provider.proName" :value="provider.id"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        <el-select v-model="isPayment" placeholder="请选择是否付款" clearable>
                            <el-option label="已支付" value="2"></el-option>
                            <el-option label="未支付" value="1"></el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="9">
                        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" icon="el-icon-plus" onclick="location.href='bill_add.html'">添加订单
                        </el-button>
                    </el-col>
                </el-row>
            </div>

            <el-table :data="billList" stripe size="medium">
                <el-table-column prop="billCode" label="订单编码"></el-table-column>
                <el-table-column prop="productName" label="商品名称"></el-table-column>
                <el-table-column prop="proName" label="供应商" width="250px"></el-table-column>
                <el-table-column prop="totalPrice" label="订单金额" width="100px"></el-table-column>
                <el-table-column label="是否付款" width="100px">
                    <template slot-scope="scope">
                        {{scope.row.isPayment == 1 ? "未支付" : "已支付"}}
                    </template>
                </el-table-column>
                <el-table-column prop="creationDate" label="创建时间"></el-table-column>

                <el-table-column label="商品封面" width="100px">
                    <template slot-scope="scope">
                        <img height="60px" :src="scope.row.imgSrc"
                             v-if="scope.row.imgSrc != null && scope.row.imgSrc != ''"/>
                        <img height="50px" src="../images/default.png" v-else/>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="updateBill(scope.row.id)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="delBill(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination :current-page="pageNow"
                           :page-size="pageSize"
                           :total="total"
                           layout="total, prev, pager, next, jumper"
                           @current-change="pageChange">
            </el-pagination>

        </div>
            <script src="../js/vue.js"></script>
            <script src="../js/axios.min.js"></script>
            <script src="../element-ui/index.js"></script>
            <script>
                var vue = new Vue({
                    el: "#app",
                    data: {
                        billList: [], //订单列表
                        proList: [],    //供应商列表
                        total: 0, //总数
                        pageNow: 1, //当前页
                        pageSize: 5, //每页行数
                        totalPage: 0, //总页码
                        productName: "",	//商品名字
                        providerId: "",	//供应商id
                        isPayment: ""		//是否付款
                    },
                    created() {
                        this.loadData_pro();
                        this.loadData_bill();

                    },
                    methods: {
                        //加载遮罩的方法
                        loadShow() {
                            //打开全屏遮罩
                            this.fullscreenLoading = this.$loading({
                                lock: true, //锁定浏览器滚动条
                                text: '正在加载...',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                            })
                        },
                        loadData_bill() {
                            var url = "../bill/findPage";
                            var data = {
                                "page": this.pageNow,
                                "size": this.pageSize,
                                "productName": this.productName,
                                "providerId": this.providerId,
                                "isPayment": this.isPayment
                            };
                            this.loadShow();
                            axios.get(url, {params: data})
                                .then(response => {
                                    if (response.data.flag) {
                                         //订单列表
                                        this.billList = response.data.data.list;
                                        //数量
                                        this.total = response.data.data.count;
                                        //去除等待页面
                                        this.fullscreenLoading.close();
                                    } else {
                                        this.$message.warning(response.data.msg);
                                        //去除等待页面
                                        this.fullscreenLoading.close();
                                    }
                                })
                                .catch(error => {
                                    alert(error);
                                })
                        },
                        //页码跳转
                        pageChange(page) {
                            this.pageNow=page;
                            //重新加载用户列表
                            this.loadData_bill();
                        },

                        //加载供应商列表
                        loadData_pro() {
                            var url = "../pro/findAll";
                            axios.get(url)
                                .then(response => {
                                    console.log(response.data.data);
                                    //供应商列表
                                    this.proList = response.data.data;

                                })
                                .catch(error => {
                                    alert(error);
                                })
                        },

                        //查询
                        search() {
                            console.log(1);
                            this.pageNow = 1;
                            this.loadData_bill();
                        },
                        //更新订单
                        updateBill(id) {
                            //修改订单
                            sessionStorage.id = id;
                            location.href = "bill_updata.html";
                        },
                        //删除订单
                        delBill(id) {
                            //删除订单
                            this.$confirm('确定删除该订单吗?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                var data={"id":id};
                                //发送ajax请求，删除订单
                                axios.get("../bill/delBill", {params: data})
                                    .then(response => {
                                        if (response.data.flag){
                                            this.$message.success("删除成功！");

                                            //重新加载数据
                                            this.pageNow = 1;
                                            this.loadData_bill();
                                        } else {
                                            this.$message.warning(response.data.msg);
                                        }
                                    })
                                    .catch(error => {
                                        this.$message.error("请求出错：" + error);
                                    });
                            }).catch(() => {
                            });
                        }
                    }

                })
            </script>
    </body>
</html>